<template>
  <a :href="articleHerf" class="newsItem-container">
    <div class="itemIcon">
      <van-icon name="hot-o" v-if="isHot" size="30px" color="red" />
      <van-icon name="new-o" v-if="isNew" size="30px" color="green" />
    </div>
    <h4>{{ title }}</h4>
    <div class="item-Bottom">
      <p>{{ author }}</p>
      <p>{{ time }}</p>
    </div>
  </a>
</template>

<script>
export default {
  props: {
    title: {
      default: "",
      type: String,
    },
    author: {
      default: "",
      type: String,
    },
    time: {
      default: "",
      type: String,
    },
    isNew: {
      default: false,
      type: Boolean,
    },
    isHot: {
      default: false,
      type: Boolean,
    },
    articleHerf: {
      default: "javascript:;",
      type: String,
    },
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.newsItem-container {
  position: relative;
  display: block;
  width: 90%;
  height: 70px;
  padding: 5px;
  padding-top: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: 1px solid black;
  background-color: #fff;
  border-radius: 5px;
  color: black;

  .itemIcon {
    position: absolute;
    top: -10px;
    left: 5px;
  }
  h4 {
    display: block;
    height: 30px;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap; //不换行
  }
  .item-Bottom {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 10px;
    height: 40px;
    font-size: 14px;
  }
}
</style>